<template>
  <div class="about">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <h2>
              <img
                class="tatle"
                :src="res.meirihaodian.title.pic"
                alt="res.meirihaodian.title.h2"
              /><small>{{ res.meirihaodian.title.small }}</small>
            </h2>
            <el-row :gutter="4">
              <el-col
                :span="12"
                v-for="(item, index) in res.meirihaodian.pic"
                :key="index"
              >
                <h3>{{ item.title }}</h3>
                <el-row :gutter="4">
                  <el-col :span="16">
                    <a href="">
                      <img class="pic" :src="item.imges[0].src" alt="" />
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="" class="ma-1">
                      <img class="pci-1" :src="item.imges[1].src" alt="" />
                    </a>
                    <a href="">
                      <img class="pci-2" :src="item.imges[2].src" alt="" />
                    </a>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="12">
            <h2>
              <img
                class="tatle"
                :src="res.taobaozhibo.title.pic"
                alt="res.taobaozhibo.title.h2"
              /><small>{{ res.taobaozhibo.title.small }}</small>
            </h2>
            <el-row :gutter="4">
              <el-col
                :span="12"
                v-for="(item, index) in res.taobaozhibo.pic"
                :key="index"
              >
                <h3>
                  {{ item.title }} <small>{{ item.see }}</small>
                </h3>
                <el-row :gutter="4">
                  <el-col :span="16">
                    <a href="">
                      <img class="pic" :src="item.imges[0].src" alt="" />
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="" class="ma-1">
                      <img class="pci-1" :src="item.imges[1].src" alt="" />
                    </a>
                    <a href="">
                      <img class="pci-2" :src="item.imges[2].src" alt="" />
                    </a>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <h2>
              <img
                class="tatle"
                :src="res.youhaohuo.title.pic"
                alt="res.youhaohuo.title.h2"
              /><small>{{ res.youhaohuo.title.small }}</small>
            </h2>
            <el-row :gutter="20">
              <el-col
                :span="4"
                v-for="(item, index) in res.youhaohuo.pic"
                :key="index"
              >
                <a href="">
                  <img class="pic" :src="item.imges.src" alt="" />
                </a>
                <h3 class="hao-1">{{ item.h3 }}</h3>
                <p class="hao-2">{{ item.p }}</p>
                <span class="hao-3">{{ item.see }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
let worsDis = {
  meirihaodian: {
    title: {
      pic: require("../assets/webp/tatle1.png"),
      h2: "每日好店",
      small: "发现深藏好店",
    },
    pic: [
      {
        title: "万能集市",
        imges: [
          {
            link: "",
            src: require("../assets/webp/1.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/2.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/3.webp"),
          },
        ],
      },
      {
        title: "淘宝江湖",
        imges: [
          {
            link: "",
            src: require("../assets/webp/4.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/5.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/6.webp"),
          },
        ],
      },
      {
        title: "深藏不露",
        imges: [
          {
            link: "",
            src: require("../assets/webp/13.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/14.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/15.webp"),
          },
        ],
      },
      {
        title: "高手林立",
        imges: [
          {
            link: "",
            src: require("../assets/webp/16.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/17.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/18.webp"),
          },
        ],
      },
    ],
  },

  taobaozhibo: {
    title: {
      pic: require("../assets/webp/tatle2.png"),
      h2: "每日好店",
      small: "你的爱豆直播等你呦！",
    },
    pic: [
      {
        title: "aj1黑脚趾",
        see: "10245观看",
        imges: [
          {
            link: "",
            src: require("../assets/webp/7.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/8.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/9.webp"),
          },
        ],
      },
      {
        title: "青青河边草真皮",
        see: "14529观看",
        imges: [
          {
            link: "",
            src: require("../assets/webp/10.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/11.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/12.webp"),
          },
        ],
      },
      {
        title: "涵木家",
        see: "14587观看",
        imges: [
          {
            link: "",
            src: require("../assets/webp/19.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/20.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/21.webp"),
          },
        ],
      },
      {
        title: "厂家优品",
        see: "45612观看",
        imges: [
          {
            link: "",
            src: require("../assets/webp/22.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/23.webp"),
          },
          {
            link: "",
            src: require("../assets/webp/24.webp"),
          },
        ],
      },
    ],
  },
  youhaohuo: {
    title: {
      pic: require("../assets/webp/tatle3.png"),
      h2: "有好货",
      small: "与品质生活不期而遇",
    },
    pic: [
      {
        h3: "大豆家方头奶奶鞋",
        p: "一脚蹬的设计，方便日常",
        see: "☺ 3158人说好",
        imges: {
          link: "",
          src: require("../assets/webp/haohuo1.webp"),
        },
      },
      {
        h3: "佳宝路转角水槽",
        p: "304不锈钢，表面光洁坚固",
        see: "☺ 158人说好",
        imges: {
          link: "",
          src: require("../assets/webp/haohuo2.webp"),
        },
      },
      {
        h3: "肖优秀真皮细高跟过膝",
        p: "细跟尖头设计更显优雅女人",
        see: "☺ 3158人说好",
        imges: {
          link: "",
          src: require("../assets/webp/haohuo3.webp"),
        },
      },
      {
        h3: "好利来黑天鹅蛋糕",
        p: "材料新鲜分量充足，奶香",
        see: "☺ 38人说好",
        imges: {
          link: "",
          src: require("../assets/webp/haohuo4.webp"),
        },
      },
      {
        h3: "汽车盲点变道辅助",
        p: "行车安全盲区检测系统，采",
        see: "☺ 3158人说好",
        imges: {
          link: "",
          src: require("../assets/webp/haohuo5.webp"),
        },
      },
      {
        h3: "PUMA芥末绿复古老爹鞋",
        p: "芥末绿色的鞋面视觉上给人",
        see: "☺ 38人说好",
        imges: {
          link: "",
          src: require("../assets/webp/haohuo6.webp"),
        },
      },
    ],
  },
};

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      res: worsDis,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
} */
.el-container {
  width: 1191px;
  margin: auto;
}
a {
  display: block;
}
img {
  display: block;
  width: 100%;
}
small {
  font-size: 12px;
  color: #999;
  font-weight: 300;
}
.pic {
  height: 180px;
}
.pci-2 {
  display: block;
  width: 100%;
  height: 89px;
}
.ma-1 {
  margin-bottom: 4px;
}
h3 {
  text-align: left;
}
.tatle {
  height: 24px;
  display: inline-block;
  width: auto;
}
h2 {
  text-align: left;
}
h2 small {
  font-size: 8px;
  position: relative;
  top: -7px;
  left: 4px;
  font-weight: 100;
}
.hao-1 {
  text-align: left;
  font-weight: 100;
  font-size: 16px;
  margin: 8px 0px;
}
.hao-1:hover {
  color: red;
}
.hao-2 {
  text-align: left;
  font-weight: 100;
  font-size: 14px;
  margin: 8px 0px;
}
.hao-3 {
  display: block;
  text-align: left;
  color: #00aeff;
  font-size: 13px;
}
.hello{
  background: rgb(253, 251, 251);
}
</style>
